<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/treeview.css" rel="stylesheet">
	<link href="css/buttons.css" rel="stylesheet">
	<link href="css/bootstrap-checkbox.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datetimepicker.css" />
	<style type="text/css">
		#vote_button{
			width:120px;
			color:white;
			background-color:#0050FF;
		}
		
		#checkout_button{
			width:120px;
			color:white;
			background-color:#329632;
		}
		
		button.dropdown-toggle
		{
			width:120px;
		}
		
		/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
		.dropdown-menu .sub-menu {
			left: 100%;
			position: absolute;
			top: 0;
			visibility: hidden;
			margin-top: -1px;
		}

		.dropdown-menu li:hover .sub-menu {
			visibility: visible;
			display: block;
		}
		
		@media (min-width: 768px) {
			.dynamic-layout {
				text-align:left;
			}
		}
		
		@media (max-width: 768px) {
			.dynamic-layout {
				text-align:center;
			}
		}
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	<div class="row" style="margin-top:80px">
		<div class="col-xs-12 col-md-8 col-md-offset-2">
			<div id='popularStocks' class='marquee-with-options'>������</div>
		</div>
	</div>
	
	<div class="row" style="margin-top:20px">
		<H3 style="text-align:center">Stocks in GuHappy Standard Contests</H3>
		<div style="text-align:center">(In Progress)</div>
		<br>
		<div class="container">
			<form class="form-inline" role="form">
				<div class="btn-group">
					<button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
						<span id="areaCode">Canada</span>
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li><a href="javascript:void(0)">Canada</a></li>
						<li><a href="javascript:void(0)">China</a></li>
						<li><a href="javascript:void(0)">United States</a></li>
						<li><a href="javascript:void(0)">France</a></li>
						<!-- <li role="presentation" class="divider"></li> -->
					</ul>
				</div>
				<br>
				<div class="row">
					<fieldset>
						<div class="squaredFour col-md-2">
							<input type="checkbox" value="None" id="seek-days" name="check"></input>
							<label for="seek-days"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3-DAYS
						</div>
						<div class="squaredFour col-md-2">
							<input type="checkbox" value="None" id="seek-week" name="check"></input>
							<label for="seek-week"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WEEK
						</div>
						<div class="squaredFour col-md-2">
							<input type="checkbox" value="None" id="seek-month" name="check"></input>
							<label for="seek-month"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MONTH
						</div>
						<div class="squaredFour col-md-2">
							<input type="checkbox" value="None" id="seek-quarter" name="check"></input>
							<label for="seek-quarter"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;QUARTER
						</div>
						<div class="squaredFour col-md-2">
							<input type="checkbox" value="None" id="seek-year" name="check"></input>
							<label for="seek-year"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;YEAR
						</div>
						<div class="squaredFour col-md-2">
							<input type="checkbox" class="checkall" value="None" id="seek-all" name="check"></input>
							<label for="seek-all"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ALL
						</div>
					</fieldset>
				</div>
				<div class="row">
					<div class="squaredBull col-md-2">
						<input type="checkbox" value="None" id="seek-bull" name="check"></input>
						<label for="seek-bull"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bull
					</div>
					<div class="squaredBear col-md-2">
						<input type="checkbox" value="None" id="seek-bear" name="check"></input>
						<label for="seek-bear"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bear
					</div>
					<div class="col-md-3">
						<div class="form-group" style="margin: 20px auto;">
							<div class='input-group date' id='datetimepicker-from'>
								<input type='text' class="form-control" placeholder="From"/>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group" style="margin: 20px auto;">
							<div class='input-group date' id='datetimepicker-to'>
								<input type='text' class="form-control" placeholder="To"/>
								<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
								</span>
							</div>
						</div>
					</div>
					<div class="col-md-1">
						<button id="inquiry" type="button" class="btn btn-blue" style="margin: 20px auto;">
							Inquiry
						</button>
					</div>
				</div>
			</form>
			<br><br>
			<div id="contests">
				<div id="template" class="row" style="margin-top:15px">
					<div class="col-md-2" style="text-align:center">
						<img id="bull_img" src="images/bull.PNG" />
						<img id="bear_img" src="images/bear.PNG" />
					</div>
					<div class="visible-xs"><br></div>
					<div class="col-md-2" style="text-align:center">
						<div id="contest_frame" class="contest_type">
							<div id="contest_type">3-DAYS</div>
							<div id="days_end">ends at: end_date</div>
						</div>
					</div>
					
					<div class="col-md-3 col-md-offset-1 dynamic-layout">
						<div style="margin-top:5px">Period: <span id="start_date">start_date</span> - <span id="end_date">end_date</span>
						</div>
						<div style="margin-top:5x">Participants: <span id="participants">participants</span>
						</div>
					</div>
					<div class="col-md-2 dynamic-layout">
						<div style="margin-top:5px">Premiums: <span id="premium">premium</span>
						</div>
						<div style="margin-top:5px">Stocks: <span id="stocks">stocks</span>
						</div>
					</div>
					<div class="col-md-1 dynamic-layout">
						<button id="vote_btn" type="button" class="btn" style="margin: 20px auto;">
							Vote
						</button>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
<script>
var $clone;
function queryContest() {
	var $template;
	$.get("data/inqueryContests.json",function(data,status){
		if(status=="success") {
			$('#contests').empty();
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.contests) {
				var contest = data.contests[i];
				if(i > 0) {
					$template = $clone.clone();
					$('#contests').append($template);
				}
				else {
					$template = $clone;
				}
				
				if(contest.updown=="bull") {
					$template.find("#bear_img").hide();
					$template.find("#bull_img").show();
					$template.find("#contest_frame").addClass("bull");
					$template.find("#vote_btn").addClass("btn-green");
				}
				else {
					$template.find("#bear_img").show();
					$template.find("#bull_img").hide();
					$template.find("#contest_frame").addClass("bear");
					$template.find("#vote_btn").addClass("btn-red");
				}
				
				var $contest_type = $template.find("#contest_type");
				$contest_type.text(function(i,origText){
					if(contest.type == "days")
						return "3-DAYS";
					else if(contest.type == "week")
						return "WEEK";
					else if(contest.type == "month")
						return "MONTH";
					else if(contest.type == "quarter")
						return "QUARTER";
					else if(contest.type == "year")
						return "YEAR";
				});
				$template.find("#days_end").text(function(i,origText){
					var text = origText.replace("end_date", contest.end_date);
					return text; 
				});
				$template.find("#start_date").text(function(i,origText){
					var text = contest.start_date;
					return text; 
				});
				$template.find("#end_date").text(function(i,origText){
					var text = contest.days_end;
					return text; 
				});
				$template.find("#participants").text(function(i,origText){
					var text = contest.participants;
					return text; 
				});
				$template.find("#premium").text(function(i,origText){
					var text = contest.premium;
					return text; 
				});
				$template.find("#stocks").text(function(i,origText){
					var text = contest.stocks;
					return text; 
				});
				
			}
		}
	});
};

$(function() {
	$('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
	
	$( "#inquiry" ).click(function() {
		queryContest();
	});
	$('#datetimepicker-from').datetimepicker();
	$('#datetimepicker-to').datetimepicker();
	
	// Setup drop down buttons.
	$(".dropdown-menu li a").bind('click', function(e) {
		$("#areaCode").text($(this).text());
	});

	$clone = $('#template').clone();
	$('#template').remove();
	
	var $mwo = $('.marquee-with-options');
	
	$.get("data/popular.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var inner = '<span class="popularStock" style="color:';
				var stock = data.stocks[i];
				if(stock.change.indexOf('-') > -1) {
					inner += '#AA1111;">';
				}
				else {
					inner += '#228822;">';
				}
				inner += stock.symbol + ' ' + stock.change + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
				html += inner;
			}
			
			$("#popularStocks").html(function(i,origHtml){
				return html; 
			});
			
			$mwo.marquee();
			
			var showing = false;
			var symbol = "";
			var currentSymbol = "";
			$(".popularStock").click(function(){
			});
		}
	});
});
</script>
</html>

